<template>
  <div class="system-evolution-container">
    <div class="task-scene">
      <label>选择任务场景：</label>
      <el-select v-model="selectedTask">
        <el-option label="综合防御任务" value="1"></el-option>
        <el-option label="火力打击任务" value="2"></el-option>
        <el-option label="后勤保障任务" value="3"></el-option>
        <el-option label="医疗救援任务" value="4"></el-option>
        <el-option label="紧急疏散任务" value="5"></el-option>
      </el-select>
    </div>

    <div class="module-group">
      <h3>核心流程</h3>
      <el-button @click="handleTrainModel" type="primary">训练模型</el-button>
      <el-button @click="handleExecutePrediction" type="primary">执行预测</el-button>
      <el-button @click="handleOptimizeModel" type="primary">优化模型</el-button>
    </div>

    <div class="module-group">
      <h3>结果查阅</h3>
      <el-button @click="handleGetPredictionResults">查看预测结果</el-button>
      <el-button @click="handleGetPreprocessResults">查看预处理结果</el-button>
      <el-button @click="handleGetPredictionModels">查看预测模型</el-button>
      <el-button @click="handleGetResultAnalysis">查看结果分析</el-button>
      <el-button @click="handleGetResultVisualization">查看结果可视化</el-button>
      <el-button @click="handleGetDynamicComparison">动态对比</el-button>
    </div>

    <div class="module-group">
      <h3>系统分析</h3>
      <el-button @click="handleGetEvolutionRules">查看演进规则</el-button>
      <el-button @click="handleGetHistoricalData">查看历史数据</el-button>
    </div>

    <div class="content-area">
      <div v-if="contentType === 'text' && content" class="text-content">
        <pre>{{ content }}</pre>
      </div>

      <div v-if="contentType === 'image' && imageList.length" class="image-content">
        <el-image v-for="(img, idx) in imageList" :key="idx" :src="img" fit="contain" class="result-image"></el-image>
      </div>

      <div v-if="contentType === 'table' && tableData.length" class="table-content">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="头实体" label="1" align="center"></el-table-column>
          <el-table-column prop="头实体类型" label="2" align="center"></el-table-column>
          <el-table-column prop="关系" label="3" align="center"></el-table-column>
          <el-table-column prop="尾实体" label="4" align="center"></el-table-column>
          <el-table-column prop="尾实体类型" label="5" align="center"></el-table-column>
        </el-table>
      </div>

      <div v-if="!loading && !errorMsg && !content && !imageList.length" class="empty-state">
        请点击上方按钮获取数据
      </div>
      <el-loading v-if="loading" text="处理中..." fullscreen></el-loading>
      <el-alert v-if="errorMsg" title="操作失败" :description="errorMsg" type="error" show-icon class="error-alert"></el-alert>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs } from 'vue'
import { callApi } from '@/utils/apiHelper'
import { ElLoading, ElButton } from 'element-plus'
import systemApi from '@/api/systemEvolution'

const selectedTask = ref('1')
const state = reactive({
  content: '',
  imageList: [],
  tableData: [],
  errorMsg: '',
  loading: false,
  contentType: ''
})

const { content, imageList, tableData, errorMsg, loading, contentType } = toRefs(state)

const updateState = (data, type) => {
  state.content = data.content
  state.tableData = data.tableData
  state.imageList = data.imageList
  state.errorMsg = data.error
  state.loading = data.loading
  state.contentType = type
}

const handleTrainModel = async () => {
  const res = await callApi(systemApi.trainModel, selectedTask.value, 'text', '训练模型失败', '训练模型已启动')
  updateState(res, 'text')
}
const handleExecutePrediction = async () => {
  const res = await callApi(systemApi.executePrediction, selectedTask.value, 'text', '执行预测失败', '执行预测完成')
  updateState(res, 'text')
}
const handleOptimizeModel = async () => {
  const res = await callApi(systemApi.optimizeModel, selectedTask.value, 'text', '优化模型失败', '优化模型完成')
  updateState(res, 'text')
}

const handleGetPredictionResults = async () => {
  const res = await callApi(systemApi.getPredictionResults, selectedTask.value, 'text', '获取预测结果失败')
  updateState(res, 'text')
}
const handleGetPreprocessResults = async () => {
  const res = await callApi(systemApi.getPreprocessResults, selectedTask.value, 'text', '获取预处理结果失败')
  updateState(res, 'text')
}
const handleGetPredictionModels = async () => {
  const res = await callApi(systemApi.getPredictionModels, selectedTask.value, 'text', '获取预测模型失败')
  updateState(res, 'text')
}

const handleGetResultAnalysis = async () => {
  const res = await callApi(systemApi.getResultAnalysis, selectedTask.value, 'text', '获取结果分析失败')
  res.tableData = res.content.map(item => ({
    "头实体": item[0],
    "头实体类型": item[1],
    "关系": item[2],
    "尾实体": item[3],
    "尾实体类型": item[4] 
  }))
  updateState(res, 'table')
}

const handleGetResultVisualization = async () => {
  const res = await callApi(systemApi.getResultVisualization, selectedTask.value, 'image', '获取可视化结果失败')
  updateState(res, 'image')
}
const handleGetDynamicComparison = async () => {
  const res = await callApi(systemApi.getDynamicComparison, selectedTask.value, 'image', '获取动态对比失败')
  updateState(res, 'image')
}

const handleGetEvolutionRules = async () => {
  const res = await callApi(systemApi.getEvolutionRules, selectedTask.value, 'text', '获取演进规则失败')
  updateState(res, 'text')
}
const handleGetHistoricalData = async () => {
  const res = await callApi(systemApi.getHistoricalData, selectedTask.value, 'image', '获取历史数据失败')
  updateState(res, 'image')
}
</script>

<style scoped>
.system-evolution-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.task-scene {
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.module-group {
  margin-bottom: 30px;
  padding: 15px;
  background: #f5f7fa;
  border-radius: 6px;
}
.module-group h3 {
  margin: 0 0 15px 0;
  color: #1f2329;
  font-size: 16px;
  font-weight: 500;
}
.el-button {
  margin-right: 10px;
  margin-bottom: 10px;
}
.content-area {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #e5e6eb;
  border-radius: 6px;
  min-height: 300px;
}
.text-content pre {
  white-space: pre-wrap;
  word-break: break-all;
  color: #333;
  line-height: 1.6;
}
.image-content {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}
.result-image {
  width: 300px;
  height: 200px;
  border: 1px solid #eee;
  border-radius: 4px;
}
.empty-state {
  color: #86909c;
  text-align: center;
  padding: 50px 0;
  font-size: 14px;
}
.error-alert {
  margin-top: 10px;
}
</style>